[Payment due @mkhutornyi] Vendor matching CC - R1: App Phase 2 (Default vendor row)#91880
Conversation
Mirrors the existing Vendor Bill default vendor flow, gated by the `vendorMatching` beta + QBO Credit/Debit-card export config so the row only appears for workspaces where the Phase 1 fuzzy matcher can actually use it. Uses the `updateQuickbooksOnlineNonReimbursableCreditCardDefaultVendor` action shipped in Phase 1 (#91235).
Codecov Report❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.
|
|
@codex review |
|
Codex Review: Didn't find any major issues. Chef's kiss. ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback". |
melvin-bot
Bot
requested review from
JmillsExpensify and
ZhenjaHorbach
and removed request for
a team
|
@ZhenjaHorbach Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
|
thanks for volunteering to help review & test here @mkhutornyi ! |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| }; | ||
|
|
||
| function QuickbooksNonReimbursableCreditCardDefaultVendorSelectPage({policy}: WithPolicyConnectionsProps) { | ||
| const {translate} = useLocalize(); |
There was a problem hiding this comment.
❌ CONSISTENCY-3 (docs)
This new page is nearly identical to QuickbooksNonReimbursableDefaultVendorSelectPage.tsx. The only differences are:
- The config key used (
nonReimbursableCreditCardDefaultVendorvsnonReimbursableBillDefaultVendor) - The update action called (
updateQuickbooksOnlineNonReimbursableCreditCardDefaultVendorvsupdateQuickbooksOnlineNonReimbursableBillDefaultVendor)
All other logic (vendor list mapping, selection handling, empty state, SelectionScreen configuration) is identical.
Consider extracting a shared component that accepts the config key and update action as parameters, e.g.:
function QuickbooksNonReimbursableVendorSelectPage({
policy,
configKey,
updateVendor,
}: WithPolicyConnectionsProps & {
configKey: string;
updateVendor: (policyID: string, value: string, oldValue?: string) => void;
}) {
// shared logic here, using configKey and updateVendor
}Then both pages can be thin wrappers or route entries that pass the appropriate config key and action.
Reviewed at: bd829c0 | Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
There was a problem hiding this comment.
mmm good idea, will do this but probs not today
Please add these emails: |
|
aah shoot i didn't add the beta to the supportal tool so it will be a bit till i can add you 😭 |
JmillsExpensify
requested review from
heyjennahay
and removed request for
JmillsExpensify
|
Re-assigned to Jenna since this is her project. |
|
@mkhutornyi added those emails to the |
Reduces duplication between QuickbooksNonReimbursableDefaultVendorSelectPage (Vendor Bill) and QuickbooksNonReimbursableCreditCardDefaultVendorSelectPage (Credit/Debit card) by extracting QuickbooksNonReimbursableVendorSelectPage parameterized by configKey + updateVendor + displayName. Both pages become thin wrappers that wire the right config key and action; routing remains unchanged so each entry still has its own component file.
Two QBO vendors are allowed to share a name; using the name as the React list key caused potential collisions in SelectionScreen rendering and made initiallyFocusedOptionKey ambiguous. vendor.id is unique and already used as the row value. Fixes both Bill and Credit/Debit-card paths via the shared component extracted in 2bf7d48.
The VendorConfigKey type is only used inside QuickbooksNonReimbursableVendorSelectPage to constrain its configKey prop; no other file imports it. Knip flagged the export as an unused type. Keep the type as a file-local declaration.
|
back to you @mkhutornyi 🙏 |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppandroid.movAndroid: mWeb ChromeiOS: HybridAppios.moviOS: mWeb SafariMacOS: Chrome / Safariweb.mov |
|
Backend sends this error: 
Vendor bill works fine though. 
|
mkhutornyi
left a comment
mkhutornyi
left a comment
There was a problem hiding this comment.
I faced this backend issue but not blocker as this feature is in beta and frontend looks good.
|
@marcochavezf Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
melvin-bot
Bot
changed the title
|
🎯 @mkhutornyi, thanks for reviewing and testing this PR! 🎉 A payment issue will be created for your review once this PR is deployed to production. If payment is not needed (e.g., regression PR review fix etc), react with 👎 to this comment to prevent the payment issue from being created. |
|
sounds good ya i'm working on a backend PR for this but ya this is all behind beta 👍 |
|
FYI backend PR here: https://github.com/Expensify/Auth/pull/22083 |
|
🚧 @marcochavezf has triggered a test Expensify/App build. You can view the workflow run here. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚀 Deployed to staging by https://github.com/marcochavezf in version: 9.4.1-0 🚀
Bundle Size Analysis (Sentry): |
|
🤖 Help site review: no changes required at this time. I reviewed the changes in this PR against the help articles under I'm recommending no help site update yet because this feature isn't generally available:
Help articles describe generally-available behavior, so the right time to document the Credit/Debit card default vendor is when I did not create a draft help site PR since no changes are required right now. @Beamanator, please confirm this assessment. If you'd prefer the QBO article updated now anyway (e.g., the beta is expected to go GA imminently), reply |
FYI this should be fixed! Backend PR went live yesterday! |
|
Hi @Beamanator Do we need specific account for this PR? With expensifail account we don't see "Default vendor" menu row.
91880-Web.mp4Recording.3804.mp4 |
|
aah shoot, yes @izarutskaya - i'd need to add the tester email account to the beta. I'll take this QA internal actually since it should all be behind a beta - cc @heyjennahay |
|
Hi @Beamanator what internal QA needs to be ran here? It seems to be behind a beta so i am unblocking the checklist. |
|
🚀 Deployed to production by https://github.com/Julesssss in version: 9.4.1-6 🚀
|
|
🤖 Payment issue created: #93124 |
|
We're working on internal QA testing separately! |
8 participants
Explanation of Change
Phase 2 of Vendor matching CC - R1: App — adds the workspace-admin "Default vendor" row in QBO Company Card export settings for Credit/Debit-card export destinations. Mirrors the existing Vendor Bill default-vendor flow.
The new row appears in
DynamicQuickbooksCompanyCardExpenseAccountPagewheneverhasVendorFeature(policy, isBetaEnabled(BETAS.VENDOR_MATCHING))is true — i.e., the workspace has thevendorMatchingbeta enabled AND QBO is connected withnonReimbursableExpensesExportDestinationset toCREDIT_CARDorDEBIT_CARD. Tapping the row navigates to a newQuickbooksNonReimbursableCreditCardDefaultVendorSelectPage(RHP), which lets the admin pick a vendor fromconnections.qbo.data.vendors; selection calls theupdateQuickbooksOnlineNonReimbursableCreditCardDefaultVendoraction shipped in Phase 1.Why this looks small
Three pieces of the original Phase 2 plan have been intentionally deferred:
Policy.areVendorsEnabled+MORE_FEATURES.ARE_VENDORS_ENABLED+ locked More Features card — verified that neither Auth nor Web-Expensify has a server-sideareVendorsEnabledpolicy NVP today (only the transaction-levelvendorNVP from the Auth foundation PR) and the PHP fuzzy matcher in the Web-Expensify commands and event hooks PR gates onBETA_VENDOR_MATCHING+ QBO config alone, not on any per-workspace toggle. Adding the App-side toggle would be pure UI state with no server-side enforcement — would need a coordinated Auth + Web-E change first. Until that lands, the right gate ishasVendorFeature(policy, beta)(existing from Phase 1), which is what this PR consumes. The Vendors More Features card itself can be added in a future PR alongside the server-toggle work if/when the design calls for it.pushTransactionViolationsOnyxDatacallers (export-type change + vendor-list sync) —selectExportCompanyCarduses the genericupdateManyPolicyConnectionConfigsand atomically writes three fields in one API call, so threading the violation push into that flow requires either refactoring out of the generic helper or introducing a vendor-specific wrapper action. The vendor-list sync (callsite 2) has no existing hook pattern (no Onyx subscriber or server-push currently). Since zero workspaces are on thevendorMatchingbeta today and the client-side violation recompute happens lazily on any next transaction edit, the cost-of-delay is essentially nil. Worth handling properly in a focused Phase 2b PR rather than rushed here.The Phase 1 PR description called Phase 2 "workspace settings". This PR delivers the Default vendor settings — the only piece that doesn't require new server coordination, an Onyx subscriber, or a nav-config diff bigger than the actual logic.
Cross-PR dependencies
UpdateMoneyRequestVendorcommand +inactiveVendorviolation type. Not consumed by this PR directly, but the App Phase 1 PR consumed it.UpdateQuickbooksOnlineNonReimbursableCreditCardDefaultVendorPHP wrapper command this PR's UI will call. Until that deploys, the row renders and lets admins pick a vendor, but the API write will return a not-found-command error on prod.Fixed Issues
$ https://github.com/Expensify/Expensify/issues/638653
PROPOSAL: N/A (internal feature, no external proposal)
Tests
Prerequisite: a workspace with the
vendorMatchingbeta enabled, QBO connected, and non-reimbursable export destination set to either Credit Card or Debit Card.Settings > Accounting. ClickConnections > QuickBooks Online > Export > Company card expenses.Vendor Bill(back on the previous page). Verify the new CC/DC default vendor row disappears.Credit CardorDebit Card. Verify the row reappears with the previously-set value preserved.vendorMatchingbeta disabled on the workspace, verify the row is hidden regardless of export destination.Offline tests
Same as Tests, executed with the network disabled after step 1. Verify the row renders from cached Onyx state and that selecting a vendor surfaces the standard offline pending-action indicator (the same
OfflineWithFeedbackwrapping the existing Vendor Bill default-vendor row).QA Steps
Same as Tests, but requires
vendorMatchingbeta enablement on the QA workspace. The row has no end-user-visible effect outside of QBO admin workspace settings, so QA scope is limited to verifying the row's visibility branches and that the select-and-save round-trip lands on the workspace config.PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps./** comment above it */thisproperly so there are no scoping issues (i.e. foronClick={this.submit}the methodthis.submitshould be bound tothisin the constructor)thisare necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);ifthis.submitis never passed to a component event handler likeonClick)Screenshots/Videos
To be added once a local build is up — the row is structurally identical across platforms (single
MenuItemWithTopDescription+ RHPSelectionScreen) so platform-specific captures will be uniform.Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari